<template>
  <div>
    <div class="add-container">
      <div class="add-title">
        <h1>添加收货地址</h1>
      </div>
      <div class="add-box">
        <Form ref="form" :model="formData" label-position="left" :label-width="100" :rules="ruleInline">
          <FormItem label="序号" prop="id" hidden class="itemRequired">
            <i-input v-model="formData.id" size="large"></i-input>
          </FormItem>
          <FormItem label="收件人" prop="receiver" class="itemRequired">
            <i-input v-model="formData.receiver" size="large"></i-input>
          </FormItem>
          <FormItem label="收件地区" prop="address" class="itemRequired">
            <v-distpicker
              :province="areaSelect.province"
              :city="areaSelect.city"
              :area="areaSelect.area"
              @selected="selectAddress"
            ></v-distpicker>
          </FormItem>
          <FormItem label="收件地址" prop="street" class="itemRequired">
            <i-input v-model="formData.street" size="large"></i-input>
          </FormItem>
          <FormItem label="手机号码" prop="phone" class="itemRequired">
            <i-input v-model="formData.phone" size="large"></i-input>
          </FormItem>
          <FormItem label="邮政编码" prop="zipCode" class="itemRequired">
            <i-input v-model="formData.zipCode" size="large"></i-input>
          </FormItem>
        </Form>
      </div>
      <div class="add-submit">
        <Button type="primary" @click="addAddress">添加地址</Button>
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'

// 收件人姓名
const receiverValidate = (rule, value, callback) => {
  const reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s\-]{2,10}$/
  if (value === undefined || value === '') {
    callback(new Error('收件姓名不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入2-10个汉字！'))
  } else {
    callback()
  }
}
// 街道
const streetValidate = (rule, value, callback) => {
  const reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s\-]{2,20}$/
  if (value === undefined || value === '') {
    callback(new Error('收件地址不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入2-20个汉字！'))
  } else {
    callback()
  }
}
// 电话号码
const tellValidate = (rule, value, callback) => {
  const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  if (value === undefined || value === '') {
    callback(new Error('电话不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入正确的电话号码'))
  } else {
    callback()
  }
}
// 邮政编码
const zipcodeValidate = (rule, value, callback) => {
  const reg = /^[1-9]\\d{5}$/
  if (value === undefined || value === '') {
    callback(new Error('邮政编码不能为空'))
  } else if (reg.test(value)) {
    callback(new Error('请输入正确的邮政编码'))
  } else {
    callback()
  }
}
export default {
  name: 'AddAddress',
  data() {
    return {
      areaSelect: {
        province: "湖北省",
        city: "宜昌市",
        area: "西陵区"
      },
      formData: {
        address: '',
        street: '',
        phone: '',
        zipCode: '',
        area:'',
        uid: '',
        receiver: ''
      },
      ruleInline: {
        receiver: [{validator:receiverValidate, trigger: 'blur'}],
        street: [{validator:streetValidate, trigger: 'blur'}],
        zipCode: [{validator:zipcodeValidate, trigger: 'blur'}],
        phone: [{validator:tellValidate, trigger: 'blur'}]
      }
    };
  },
  methods: {
    // 地址选择器
    selectAddress(data) {
      this.areaSelect.province = data.province.value
      this.areaSelect.city = data.city.value
      this.areaSelect.area = data.area.value
    },
    addAddress() {
      this.formData.area = this.areaSelect.province + ',' + this.areaSelect.city + ',' + this.areaSelect.area
      const _this = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          _this.$http.post('/address/addAddress', this.formData)
            .then(resp => {
              _this.$Message.success("添加地址成功")
              _this.$router.push({path: '/home/MyAddress'})
            })
            .catch(err => {
              _this.$Message.error("添加地址失败")
            })
        }
      })
    }
  },
  components: {
    VDistpicker
  },
  created: function() {
    const _this = this;
    let user = sessionStorage.getItem('loginInfo');
    let userin = (JSON.parse(user));
    _this.formData.uid = userin.id

  }
};
</script>

<style scoped>
.add-container {
  margin: 15px auto;
  width: 60%;
  min-width: 600px;
}

.add-title {
  margin-bottom: 15px;
  text-align: center;
}

.add-submit {
  display: flex;
  justify-content: center;
}

.itemRequired>>>label.ivu-form-item-label::before {
  content: '* ';
  color: #F56C6C;
  margin-right: 2px;
}
</style>
